<script setup>
// 定义组件属性及默认值（纯JS方式）
const props = defineProps({
  // 对齐方式
  align: {
    type: String,
    default: 'left'
  },
  // 标签是否可见
  labelVisible: {
    type: Boolean,
    default: true
  },
  // 是否必填
  required: {
    type: Boolean,
    default: false
  },
  // 标签文本
  label: {
    type: String,
    default: ''
  },
  // 标签宽度
  labelWidth: {
    type: String,
    default: ''
  },
  // 占位符
  placeholder: {
    type: String,
    default: ''
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  }
})

// 双向绑定值
const value = defineModel()
</script>

<template>
  <div :class="['flex', align === 'top' ? 'flex-col items-stretch' : 'items-center']">
    <div v-if="labelVisible" class="text-sm flex items-center mr-1 font-medium">
      <template v-if="$slots.label">
        <span v-if="required" class="text-red-500 mr-0.5">*</span>
        <slot name="label"></slot>
      </template>
      <div v-else :style="{ width: labelWidth, textAlign: align === 'top' ? 'left' : align }">
        <span v-if="required" class="text-red-500 mr-0.5">*</span>
        <span> {{ label }}</span>
      </div>
    </div>
    <select :aria-label="label" :name="label" v-model="value" :placeholder="placeholder || '请选择' + props.label"
      :disabled="disabled || readonly" class="text-sm" :class="[
        'grow h-[32px] rounded-xs border-none bg-[#f7f8fa] pl-[8px] pr-[8px] font-medium',
        align !== 'top' ? 'ml-2' : 'mt-1.5',
      ]">
      <slot></slot>
    </select>
  </div>
</template>

<style scoped>
select::placeholder {
  color: #757575
}

select:focus {
  outline: none;
}

select:focus-visible {
  outline: none;
}

select[disabled] {
  color: #757575
}
</style>
